import React, { useEffect } from "react";
import "./index.css";
import "highlight.js/styles/stackoverflow-light.css";
import hljs from "highlight.js";

const hljsHighLightBlock = () => {
  document.querySelectorAll("pre code").forEach((b) => {
    try {
      hljs.highlightBlock(b);
    } catch (err) {
      console.error(err);
    }
  });
};

export default function ({
  title,
  descriptions,
  content,
  apiInfo,
  componentApi,
}) {
  useEffect(() => {
    hljsHighLightBlock();
  }, []);
  const columns = content.columns ?? 1;
  return (
    <div>
      <h2>{title}</h2>
      <ul className="description-list">
        {descriptions?.map((desc, index) => (
          <li key={`desc-${index}`}>{desc}</li>
        ))}
      </ul>
      <h2>{content?.title}</h2>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: `repeat(${columns},${100 / columns}%)`,
          gridColumnGap: "15px",
        }}
      >
        {content?.children?.map((child, index) => (
          <div key={`content-${index}`} className="content-wrapper">
            <div className="content-title">{child.title}</div>
            <div className="content-divider" />
            {child?.descriptions && (
              <>
                <div className="content-descriptions">{child.descriptions}</div>
                <div className="content-divider" />
              </>
            )}
            <div className="content-component-example">{child.component}</div>
            <div className="content-divider" />
            {child.codeSnippet && (
              <pre style={{ fontSize: "13px", height: "100%" }}>
                <code>{child.codeSnippet}</code>
              </pre>
            )}
          </div>
        ))}
      </div>
      <h2>API</h2>
      <ul className="description-list">
        {apiInfo?.map((info, index) => (
          <li key={`api-info-${index}`}>{info}</li>
        ))}
      </ul>
      <table className="content-api-table">
        <thead>
          <tr>
            <th>参数</th>
            <th width={80}>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          {componentApi?.map((api, index) => (
            <tr key={`component-api-${index}`}>
              <td>{api.param}</td>
              <td>{api.required ? "✅" : ""}</td>
              <td>{api.description}</td>
              <td>{api.type}</td>
              <td>{api.default}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
